<template>
  <div class="merchantSettled-wap">
    <div class="step-div">
      <div>
        <div class="content content2">
          <p class="title">{{ $t('PromoteText3') }}</p>
          <p class="info"> {{ $t('PromoteText4') }}<span @click="jumpToLogin">{{ $t('PromoteText5') }}</span></p>
          <el-form label-width="200" label-position="left">
            <el-form-item :label="$t('PromoteLabel1')">
              <el-upload
                  class="avatar-uploader"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :show-file-list="false"
              >
                <!--          <img v-if="imageUrl" :src="imageUrl" class="avatar" />-->
                <img src="@/assets/images/icon-upload.png" alt="">
              </el-upload>
            </el-form-item>
            <el-form-item :label="$t('PromoteLabel2')">
              <el-input :placeholder="$t('PromoteLabel2Placeholder')" />
            </el-form-item>
            <el-form-item :label="$t('PromoteLabel5')">
              <el-input :placeholder="$t('PromoteLabel5Placeholder')" />
            </el-form-item>
            <el-form-item :label="$t('PromoteLabel3')">
              <el-input :placeholder="$t('PromoteLabel3Placeholder')" />
            </el-form-item>
            <el-form-item :label="$t('PromoteLabel3-1')">
              <div class="uploder-center">
                <div class="uploder-two-wrap">
                  <el-upload
                      class="avatar-uploader"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      :show-file-list="false"
                  >
                    <!--          <img v-if="imageUrl" :src="imageUrl" class="avatar" />-->
                    <img src="@/assets/images/icon-upload.png" alt="">
                    <template #tip>
                      <div>{{$t('PromoteLabel3Text1')}}</div>
                    </template>
                  </el-upload>
                </div>
                <div class="uploder-two-wrap">
                  <el-upload
                      class="avatar-uploader"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      :show-file-list="false"
                  >
                    <!--          <img v-if="imageUrl" :src="imageUrl" class="avatar" />-->
                    <img src="@/assets/images/icon-upload.png" alt="">
                    <template #tip>
                      <div>{{ $t('PromoteLabel3Text2') }}</div>
                    </template>
                  </el-upload>
                </div>
                <div class="uploder-two-wrap">
                  <el-upload
                      class="avatar-uploader"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      :show-file-list="false"
                  >
                    <!--          <img v-if="imageUrl" :src="imageUrl" class="avatar" />-->
                    <img src="@/assets/images/icon-upload.png" alt="">
                    <template #tip>
                      <div>{{ $t('PromoteLabel3Text3') }}</div>
                    </template>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item :label="$t('PromoteLabel4')">
              <div class="correct-warp">
                <img src="">
                <img src="">
                <img src="">
              </div>
            </el-form-item>

            <el-form-item :label="$t('PromoteLabel6')">
              <el-input placeholder="请输入正确的电子邮箱" />
            </el-form-item>
            <el-form-item :label="$t('PromoteLabel7')">
              <el-input type="password" placeholder="请输入登录密码" :show-password="true" />
            </el-form-item>
            <el-form-item :label="$t('PromoteLabel8')">
              <el-input placeholder="请确认输入登录密码" show-password />
            </el-form-item>
            <el-form-item :label="$t('PromoteLabel9')">
              <el-input placeholder="请输入邀请码" />
            </el-form-item>
          </el-form>
        </div>
        <div class="bottom">
          <div style="display: flex; align-items: center;" @click="lookUpAgreement">
            <el-checkbox v-model="isChecked" :label="$t('PromoteText6')" size="large" />
            <span class="color-yellow">{{ $t('PromoteText7') }}</span>
          </div>
          <el-button size="large" type="primary">
            {{ $t('PromoteBtn') }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter()
const emits = defineEmits(['openAgreement'])
const isChecked = ref(false)

const jumpToLogin = () => {
  router.push('/login')
}
const lookUpAgreement = () => {
  emits('openAgreement')
}
</script>
<style scoped lang="scss">
:deep(.el-button--primary) {
  color: #fff;
  background-color: var(--color-main);
  border-color: var(--color-main)
}
.merchantSettled-wap{
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75rem;
  margin: 0 auto;
  z-index: 99;
  .step-div{
    width: 100%;
    background: #fff;
    border-radius: .25rem;
    margin-top: -2.875rem;
    .content{
      padding: 1.25rem 1.875rem;
      border: 1px solid #eee;
      p{
        font-family: PingFang HK;
        font-style: normal;
        font-size: .875rem;
        color: #333;
        padding: .375rem 0;
      }
      .title{
        font-size: 1.5rem;
        color: #333;
        font-weight: 700;
      }
      .info{
        margin-top: -.3125rem;
        margin-bottom: 1.25rem;
        position: relative;
        z-index: 99;
        span{
          color: var(--color-main);
          cursor: pointer;
        }
      }
    }
    .bottom{
      height: 8.75rem;
      font-size: .875rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      margin: 1.25rem 0;
    }
  }
}
:deep(.el-input){
  width: 20rem;
  height: 50px;
}
:deep(.el-select){
  width: 20rem;
  height: 50px;
}
:deep(.el-select__wrapper){
  height: 50px;
}
.color-yellow{
  color: var(--color-main) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
}
:deep(.el-checkbox.el-checkbox--large .el-checkbox__inner){
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
:deep(.el-checkbox__inner:after) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
:deep(.el-input-group__prepend){
  width: 75px;
  box-shadow: none;
  background: #fff;
}
:deep(.input-with-select .el-input__wrapper){
  width: calc(20rem - 75px);
}
:deep(.el-popper__arrow){
  left: 35px !important;
}
.uploder-center{
  display: flex;
  .uploder-two-wrap{
    margin-right: 1.875rem;
  }
}
.correct-warp{
  display: flex;
  img{
    width: 6.25rem;
    margin-right: 1.25rem;
  }
}
</style>